<template>
  <el-popover
    placement="top-start"
    :width="200"
    trigger="hover"
    :content="tooltip"
  >
    <div class="icon" :data-tooltip="tooltip" :class="{ 'no-tooltip': !showTooltip,tooltipDirection }">
      <img class="icon" :class="{'disabled': disable}" :src="src" :alt="alt"
           :style="{ width: iconSize, height: iconSize }">

    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = withDefaults(defineProps<{
  tooltip: string,
  src: string,
  iconSize: string,
  alt: string,
  disable: boolean,
  showTooltip: boolean,
  tooltipDirection: string  // 新增控制 tooltip 方向的属性
}>(), {
  tooltip: '',   // 提供默认的 tooltip
  src: '',   // 提供默认的图片路径
  iconSize: '0px',   // 提供默认的图标大小
  alt: '',
  disable: false,
  showTooltip: true,
  tooltipDirection: 'top'  // 默认方向为 top
})
</script>

<style scoped lang="less">
.icon {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  &.no-tooltip::after {
    display: none; // 当有 no-tooltip 类时，不显示 after 伪元素
  }

  &::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: nowrap;
    background-color: black;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  &.top::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  &.bottom::after {
    top: 200%;
    left: 50%;
    transform: translateX(-50%);
  }

  &.left::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  &.right::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  &.top::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  &.bottom::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  &:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
